<template>
	<div class="container">
		<div style="padding: 15px 0 0 16px;" >
			<div class="onlyfont18" style="float: left">是否显示所有：</div>
			<t-switch :label="['全', '自']" v-model="query.all" @change="allChange"></t-switch>
		</div>
		<div v-show="loading" class="center-item-box">
			<t-loading theme="dots" size="40px" style="margin: 0 auto; display: block;"/>	
		</div>
		
		<t-radio-group v-show="!loading" v-model="radio"  @change="onChange">
			
		    <view v-for="(item, index) in tasks" :key="index" :class="`card ${radio == index ? 'card--active' : ''}`">
		    	<icon v-if="radio == index" name="check" class="card__icon" />
		    	<t-radio style="font-size: 24px; font-weight: bold; line-height: 30px;" :disabled="checkDisabled(item)" :value="index" icon="none" borderless>
		    		<template #label>
		    			<span>{{item.process_name}}</span>
		    			<span v-if="item.name"> - {{item.name}}</span>
		    			<span v-if="item.name && is_manage"><t-button theme="danger" @click="deleteSalary(item)" size="small"><t-icon style="font-size: 20px;" name="delete-1"></t-icon></t-button></span>
		    		</template>
		    		<template #content>
		    			<div class="font18">{{item.procedure_name}}</div>
		    			<t-row>
						    <t-col span="12" class="dark font18">
						    	颜色：{{patch_item.color}}
						    </t-col>
						    <t-col span="12" class="light font18">
						    	缸号: {{patch_item.gh}}
						    </t-col>
						</t-row>

						<t-row>
						    <t-col span="12" class="dark font18">
						    	尺码：{{patch_item.size}}
						    </t-col>
						    <t-col span="12" class="light font18">
						    	数量: {{patch_item.number}}
						    </t-col>
						</t-row>
		    		</template>
		    	</t-radio>

		    </view>
		</t-radio-group>
	</div>

	<div class="row">
		<t-button size="large" class="font24" theme="primary" @click="submit" block>提 交</t-button>
		<t-button style="margin-top: 10px;" class="font24" size="large" @click="backHome" theme="" block>返 回</t-button>
	</div>

	<t-dialog v-model:visible="resultShowDialog" title="提交结果" confirm-btn="知道了" :cancel-btn="{content: '取消扫码', theme: 'danger'}" button-layout="vertical" @cancel="cancelScan" @confirm="confirmScan" :close-on-overlay-click="false" >
		<template #content>
			<t-result style="z-index: 1600;" :theme="result.theme" :title="result.title" class="space">
				<template #description>
					<div class="font18">{{patch_item.procedure_name}}</div>
	    			<t-row>
					    <t-col span="24" class="dark font18">
					    	颜色：{{patch_item.color}}
					    </t-col>
					    <t-col span="24" class="light font18">
					    	尺码：{{patch_item.size}}
					    </t-col>
					</t-row>

					<t-row>
					    <t-col span="24" class="dark font18">
					    	缸号: {{patch_item.gh}}
					    </t-col>
					    <t-col span="24" class=" font18">
					    	数量: {{patch_item.number}}
					    </t-col>
					</t-row>
				</template>
			</t-result>
		</template>
	</t-dialog>

</template>
<script>
	import { UserFilled } from '@element-plus/icons-vue'
	export default {
		components: {
		    UserFilled
		},
		data() {
			return {
				activeValue: 'home',
				username: this.$TOOL.data.get("USER_INFO").userName,
				list: [
				  { value: 'home', label: '首页', icon: 'home' },
				  { value: 'user', label: '我的', icon: 'user' },
				],
				radio: -1,
				resultShowDialog: false,
				patch: 0,
				tasks: [],
				patch_item: {},
				result: {
					theme: 'error',
					title: '',
				},
				query: {
					path: 0,
					all: false,
				},
				loading: false,
				salary_id: 0,
				is_manage: this.$TOOL.data.get('USER_INFO').is_manage
			}
		},
		watch:{
			
		},
		created: function() {
			this.query.patch = this.$route.query.patch
			// this.$alert(this.patch, "提示", {type: 'error'})
			this.getTaskList()
		},
		methods: {
			async getTaskList() {
		
				var res = await this.$API.salary.task.get(this.query);
				if (res.code == 200) {
					this.tasks = res.tasks
					this.patch_item = res.patch_item
				}
				this.loading = false
			},
			checkDisabled(item) {
				if (item.name) {
					return true
				} else {
					return false
				}
			},
			allChange() {
				this.loading = true
				this.getTaskList()
			},
			menuSelect(e) {
				console.log(e);
				if (e == 'user') {
					// 跳转个人中心
					this.$router.replace({
						path: '/user'
					})
				} 
			},
			async deleteSalary(task) {
				var confirm = await this.$confirm('确认删除已扫工资？','提示', {
					type: 'warning',
					confirmButtonText: '删除',
					confirmButtonClass: 'el-button--danger'
				}).catch(() => {})

				if(confirm != 'confirm'){
					return false
				}

				var reqData = {
					patch_number: task.patch_number
				}
				var res = await this.$API.salary.unSalaryManage.post(reqData);

				if (res.code == 200) {
					this.$message.success('删除成功');
					this.getTaskList()
				} else {
					this.$message.error(res.message);
				}
			},
			backHome() {
				this.$router.replace({
					path: '/'
				})
			},
			async submit() {
				if (this.radio == -1) {
					return this.$alert('请选择工序', "提示", {type: 'error'})
				}
				
				// 结算
				// 找到选中的
				var checkedTask = this.tasks[this.radio]
				var reqData = {
					task_id : checkedTask.id
				}
				var res = await this.$API.salary.salary.post(reqData)
				if (res.code == 200) {
					this.result.theme = 'success'
					this.result.title = '工资录入成功'
					this.salary_id = res.data.id // 工资ID
					this.resultShowDialog = true
				} else {
					this.$alert(res.message, '提示', {type: 'error'})
				}

			},
			confirmScan() {
				this.$router.replace({
					path: '/'
				})
			},
			cancelScan() {
				// this.resultShowDialog = true
				// 取消扫码
				return this.$confirm(`是否取消当次扫码?`, '提示', {
					type: 'error',
				}).then(async () => {
					
					// 点击了确定
					var reqData = {
						salary_id: this.salary_id
					}

					var res = await this.$API.salary.unSalary.post(reqData)
					if (res.code == 200) {
						this.result.title = '已经取消本次扫码'
						this.result.theme = 'error'
						this.resultShowDialog = true
					} else {
						this.$alert(res.message, '取消失败', 'error')
					}

				}).catch(() => {
					//return false
					// 回首页
					this.$router.replace({
						path: '/'
					})
				})
			}
		}
	}
</script>
<style type="text/css">
	.el-footer {padding: 0px}
	.el-menu-item {width: 100%}
	.button-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	.card {
	  display: block;
	  position: relative;
	  margin: 16px;
	  border-radius: 6px;
	  overflow: hidden;
	  box-sizing: border-box;
	  border: 1.5px solid #fff;
	}

	.card--active {
	  border-color: #0052d9;
	}

	.card--active::after {
	  content: '';
	  display: block;
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 0;
	  border: 14px solid #0052d9;
	  border-bottom-color: transparent;
	  border-right-color: transparent;
	}

	.card__icon {
	  display: block;
	  color: #fff;
	  position: absolute;
	  left: 1.5px;
	  top: 1.5px;
	  z-index: 1;
	}

	/* 横向布局 */
	.horizontal-box {
	  width: calc(100% - 32px);
	  display: flex;
	  align-items: center;
	  margin: 16px;
	}

	.horizontal-box .card {
	  flex: 1;
	  margin: 0;
	}

	.horizontal-box .card + .card {
	  margin-left: 12px;
	}
	.row {
	  padding: 0 16px;
	  position: fixed;
	  width: 100%;
	  bottom: 0px;
	  background-color: white;
	}
	.container {
		padding-bottom: 105px;
	}
</style>